<template>
    <div class="page_report">
        <div id="export_report_id" style="width: 1700px;margin: auto;">
            <div style="text-align: center;font-size: 20px;color: #1aabb8;margin-top: 50px;margin-bottom: 20px;">{{$t('common.trainerName')}}【{{ nickName }}】{{$t('common.planAnalysis')}} 
            </div>
            <div class="infoBoxTop">
                <div class="studentInfo">
                    <div class="avatorWrap">
                        <img :src="avatar" width="80" height="80" style="margin-right:30px;" v-if="avatar!==''" />
                        <div class="avatorBigBox" v-else></div>
                    </div>
                    <div class="avatorIn"> 
                        <div class="inhw">{{$t('common.name')}}：{{nickName}}</div>
                        <div class="inhw">{{$t('common.gender')}}：<span v-if="+sex== 1">{{$t('common.male')}}</span><span v-else-if="+sex ==2">{{$t('common.female')}}</span></div>
                        <div class="inhw">{{$t('common.height')}}：{{height}}cm &nbsp; &nbsp;{{$t('common.weight')}}：{{weight}}kg</div>
                    </div>
    
                </div>
                <div class="sportRecord">
                    <div v-for="(group, index) in canShowVideoList" class="groupRecord">{{ actionName }}
                        <span class="color88" v-if="$i18n.locale === 'zh-CN' "> 第{{ group.seq }}组</span> <span class="color88" v-else >Group {{ group.seq }} </span>&nbsp;{{$t('common.maxGoalSpeed')}}  ：<span class="color88"> {{ group.rate }}m/s</span>&nbsp;{{$t('common.heft')}}：<span class="color88"> {{
                             group.weight }}kg </span> {{$t('common.frequency')}}：<span class="color88"> {{ group.frequency }}</span> &nbsp;{{$t('common.sportsTime')}}：<span class="color88"> {{ group.startTrainTime}}~{{ group.endTrainTime }}</span>
                        <Button type="warning" size="small" icon="ios-pulse" @click="viewAnalysis(group.sportsRecordId)" style="margin-left: 10px;margin-top: -2px" :disabled="analysisBtnDiabled(group)"> {{$t('common.groupAnalyReport')}}
                            </Button>
                    </div>
                </div>
                <div class="btnBox">
                    <Button class="btnWhite" type="primary" style="margin-right:15px" @click="testListVisiable=true">{{$t('common.videoView')}}</Button>
                    <Button class="btnWhite" type="primary" @click="doExport">{{$t('export')}} </Button>
                </div>
            </div>
            <Collapse v-model="collapseName" style="margin-bottom: 50px">
                <Panel name="baseInfo">
                 {{$t('common.sportInfo')}} 
                    <p slot="content">
                        <Row class="form-row">
                            <Col span="6" class="form_filed">{{$t('common.planName')}}： </Col>
                            <Col span="6" class="form_filed_val">{{ planName }}</Col>
                            <Col span="6" class="form_filed">{{$t('common.courseName')}}： </Col>
                            <Col span="6" class="form_filed_val">{{ courseSnapshotName }}</Col>
                        </Row>
                    </p>
                </Panel>
                <Panel name="power_speed_function">
                  {{$t('common.powerAvgQx')}} 
                    <div slot="content" style="min-height: 350px">
                        <div style="position:relative">
                              <div
                style="
                  position: absolute;
                  right: 0;
                  top: 0;
                  cursor: pointer;
                  color: #2ac9cf;
                  font-weight: bold;
                  z-index:10
                "
                v-if="isSpeedLine"
                @click="changeViewS"
              >
              {{$t('common.changeBar')}}  
              </div>
              <div
                v-else
                style="
                  position: absolute;
                  right: 0;
                  top: 0;
                  cursor: pointer;
                  color: #2ac9cf;
                  font-weight: bold;
                   z-index:10
                "
                @click="changeViewS"
              >
              {{$t('common.changeLine')}}  
                
              </div>
                        </div>
                        <div ref="power_speed_function" style="height: 300px;"></div>
                    </div>
                </Panel>
    
                <Panel name="power_speed">
                  {{$t('common.pAgv')}}   
                    <div slot="content" style="min-height: 350px">
                        
                             <div style="position:relative">
                              <div
                style="
                  position: absolute;
                  right: 0;
                  top: 0;
                  cursor: pointer;
                  color: #2ac9cf;
                  font-weight: bold;
                  z-index:10
                "
                v-if="isPowerLine"
                @click="changeViewSP"
              >
              {{$t('common.changeBar')}}  
                
              </div>
              <div
                v-else
                style="
                  position: absolute;
                  right: 0;
                  top: 0;
                  cursor: pointer;
                  color: #2ac9cf;
                  font-weight: bold;
                   z-index:10
                "
                @click="changeViewSP"
              >
              {{$t('common.changeLine')}}  
              </div>
                        </div>
                        <div ref="power_speed" style="height: 300px;"></div>
                    </div>
                </Panel>
    
                <Panel name="dataList">
                  {{$t('common.summaryList')}}   
                    <div slot="content" style="margin-bottom: 20px">
                        <div style="margin: 0px 80px">
                            <Table :columns="column" border :data="weightAvgVoList" stripe>
                            </Table>
                        </div>
                    </div>
                </Panel>
                <Panel name="sortList">
                     {{$t('common.sportsRank')}}
                    <div slot="content" style="margin-bottom: 20px">
                        <div style="margin: 0px 80px">
                            <Table :columns="sortColumn" border :data="sortList" stripe>
                            </Table>
                        </div>
                    </div>
                </Panel>
    
            </Collapse>
        </div>
        </Modal>
        <!-- 视频播放列表 -->
        <Modal v-model="testListVisiable" :mask-closable="false" width="800" :title=" $t('common.videoList')">
            <div slot="footer"></div>
    
            <Table :columns="testColumn" border :data="canShowVideoList" stripe style="min-height: 278px">
    
            </Table>
    
        </Modal>
        <!-- 展示视频播放 -->
        <Modal v-model="showVideoVisible" :mask-closable="false" width="800" :title="$t('common.videoView')" mask>
            <VideoModail :videoList="videoList" :curPlayId="curPlayId" :playVideoUrl="playVideoUrl" />
            <div slot="footer" style="text-align: center">
        <Button @click="showVideoVisible=false">{{$t('cancel')}}</Button>
      </div>
        </Modal>
    </div>
</template>

<script>
import echarts from "echarts";
import AnalysisReportApi from "@/api/analysisReportApi";
import sportsEvaluationApi from "@/api/sportsEvaluationApi";
import { isEmpty } from "@/libs/util";
import html2canvas from "html2canvas";
import { downloadByBase64 } from "../../utils/downloadImg";
import VideoApi from "@/api/videoApi";
import { getToken } from "@/libs/util";
import VideoModail from "./videoModail.vue";
export default {
  name: "page_report",
  components: { VideoModail },
  data() {
    return {
      isSpeedLine: true,
      isPowerLine: true,
      showVideoVisible: false,
      videoList: [],
      curPlayId: "",
      playVideoUrl: "",
      testListVisiable: false,
      weight: "",
      height: "",
      sex: -1,
      avatar: "",
      startTrainTimeList: [],
      endTrainTimeList: [],
      canShowVideoList: [],
      day: "",
      trainDetailId: "",
      trainerId: "",
      nickName: "",
      actionName: "",
      planName: "",
      courseSnapshotName: "",
      sportsRecord: {},
      collapseName: [
        "baseInfo",
        "power_speed_function",
        "power_speed",
        "dataList",
        "sortList",
      ],
      firstDom: null,
      secondDom: null,
      weightAvgVoList: [],
      sortList: [],
      rateWeightVoList: [],
      groupList: {},
      weightArr: [],
      bar_color: "#34DABA", // 平均速度颜色
      avgSpeedDataArr: [], // 平均速度数组
      avgPowerDataArr: [], // 平均功率数组
      color_no_pass: "#FE4C4C",
      line_color: "#0084F8",
      rateArr: [],
      rateWeighArr: [],
      // 功率
      avgFunctionDataArr: [],
      maxFunctionDataArr: [],
      strengthDataArr: [],
      testColumn: [
        {
          title: this.$t('common.seq'), 
          slot: "seq",
          width: '110',
          key: "xuHao",
          render: (h, params) => {
            return h(
              "span",

              params.index + 1
            );
          },
        },
        {  title: this.$t('common.videoName'), key: "videoName" },
        {
          title: this.$t('common.optColumn') ,
          key: "action",
          render: (h, params) => {
            return h("div", [
              h(
                "span",
                {
                  props: {
                    size: "small",
                  },
                  class: "testBtn",
                  style: {
                    // marginRight: "15px",
                    background: "#363840",
                    padding: " 5px 10px",
                    color: "#fff",
                    display: "inline-block",
                    borderRadius: "5px",
                    cursor: "pointer",
                  },
                  on: {
                    click: () => {
                      this.playVideo(params.row);
                    },
                  },
                },
              this.$t('common.videoView') 
              ),
            ]);
          },
        },
        {
          title: this.$t('common.dVideo'), 
          key: "action1",
          render: (h, params) => {
            return h("div", [
              h("span", {
                class: "downBtn",

                on: {
                  click: () => {
                    this.downVideo(params.row, params.row.videoName);
                  },
                },
              }),
            ]);
          },
        },
      ],
      column: [
        { title: this.$t('common.group') , key: "seq" },
        { title:  this.$t('common.heft') + "(kg)", key: "weight" },
        { title:   this.$t('common.avgSpeed') +"(m/s)", key: "avgSpeed" },
        { title:  this.$t('common.avgPower') + "(W)", key: "avgPower" },
      ],
      sortColumn: [
        {
          
          title: this.$t('common.ranking') ,
          key: "ranking",
          render: (h, params) => {
            if (+params.row.ranking == 1) {
              return h("div", {
                class: "firstIcon",
              });
            } else if (+params.row.ranking == 2) {
              return h("div", {
                class: "secondIcon",
              });
            } else if (+params.row.ranking == 3) {
              return h("div", {
                class: "thirdIcon",
              });
            } else {
              return params.row.ranking;
            }
          },
        },

        { title:  this.$t('common.trainerName')  , key: "trainer" },
        {
          title:  this.$t('common.avatar'),
          key: "trainerAvatar",
          render: (h, params) => {
            // return h('strong', params.row.trainerAvatar)
            if (!params.row.trainerAvatar) {
              return h("div", {
                class: "avatorBox",
              });
            }
            return h("img", {
              style: {
                // 样式
                width: "20px",
                border: "1px solid",
              },
              attrs: {
                src: params.row.trainerAvatar,
              },
              on: {},
            });
          },
        },
        { title: this.$t('common.maxPower') + "（W）", key: "maxPower" },
      ],
    };
  },
  mounted() {
    this.day = this.$route.query.day;
    this.trainDetailId = this.$route.query.trainDetailId;
    this.trainerId = this.$route.query.trainerId;
    this.$Spin.show({
      render: (h) => {
        return h("div", [
          h("Icon", {
            class: "demo-spin-icon-load",
            props: {
              type: "ios-loading",
              size: 18,
            },
          }),
          h("div", "Loading"),
        ]);
      },
    });
    this.initAnalysisData();
  },
  methods: {
    changeViewS() {
      
      if (this.isSpeedLine) {
        this.initPowerRateFunctionChartB();
      } else {
        this.initPowerRateFunctionChart();
      }
      this.isSpeedLine = !this.isSpeedLine;
    },
    changeViewSP(){
      
 if (this.isPowerLine) {
        this.initPowerRateChartB();
      } else {
        this.initPowerRateChart();
      }
      this.isPowerLine = !this.isPowerLine;
    },
    queryVideoList(sportsRecordId, type, downObj = {}) {
      VideoApi.getVideoList(sportsRecordId).then(
        (res) => {
          this.videoList = res.data.data;
          if (this.videoList.length == 0) {
            
            this.$Message.error( this.$t('common.noVideoSport'));
            return;
          }

          const video = this.videoList[0];
          this.curPlayId = video.id;
          this.playVideoUrl =
            "web/video/play/" + video.id + "?token=" + getToken();
          if (type) {
            setTimeout(() => {
              this.showVideoVisible = true;
            }, 1000);
          } else {
            // debugger
            this.downLoadAjax(this.playVideoUrl, downObj.actionName);
          }
        },
        (error) => {
          this.$Message.error(this.$t('common.noVideo') );
          this.videoList = [];
        }
      );
    },
    downVideo(row, actionName) {
      this.queryVideoList(row.sportsRecordId, 0, { actionName });
    },
    downLoadAjax(url, name) {
      let that =this;
      const xhr = new XMLHttpRequest();
      xhr.open("get", url, true);
      that.$Message.error(that.$t('common.downLoadSuc') );
      xhr.responseType = "blob"; // 返回类型blob
      // 定义请求完成的处理函数，请求前也可以增加加载框/禁用下载按钮逻辑
      xhr.onload = function () {
        // 请求完成
        if (this.status === 200) {
          // 返回200
          const blob = this.response;
          const href = window.URL.createObjectURL(blob); // 创建下载的链接
          // 判断是否是IE浏览器，是的话返回true
          if (window.navigator.msSaveBlob) {
            try {
              window.navigator.msSaveBlob(blob, name);
            } catch (e) {
              that.$Message.error(that.$t('common.downVideoError') );
              console.log(e);
            }
          } else {
          
            // 谷歌浏览器 创建a标签 添加download属性下载
            const downloadElement = document.createElement("a");
            downloadElement.href = href;
            downloadElement.target = "_blank";
            downloadElement.download = name; // 下载后文件名
            document.body.appendChild(downloadElement);
            downloadElement.click(); // 点击下载
            document.body.removeChild(downloadElement); // 下载完成移除元素
            window.URL.revokeObjectURL(href); // 释放掉blob对象
          }
        }
      };
      // 发送ajax请求
      xhr.send();
    },
    playVideo(row) {
      this.queryVideoList(row.sportsRecordId, 1);
    },
    analysisBtnDiabled(group) {
      return isEmpty(group.sportsRecordId);
    },
    doExport() {
      // #export_report_id 就是我们要获取截图对应的 DOM 元素选择器
      html2canvas(document.querySelector("#export_report_id"), {
        useCORS: true, // 【重要】开启跨域配置
        scale: window.devicePixelRatio < 3 ? window.devicePixelRatio : 2,
        allowTaint: true, // 允许跨域图片
      }).then((canvas) => {
        const imgData = canvas.toDataURL("image/jpeg", 1.0);
        downloadByBase64(imgData, this.$t('common.sumReportExport') + `-${new Date().getTime()}.png`);
      });
    },
    getGroupStyle(group) {
      if (isEmpty(group.sportsRecordId)) {
        return {
          textAlign: "center",
          padding: "0px 0px 10px 0px",
          color: "#888",
          fontSize: "16px",
          lineHeight: "20px",
        };
      } else {
        return {
          textAlign: "center",
          padding: "0px 0px 10px 0px",
          color: "#ff9900",
          fontSize: "16px",
          lineHeight: "20px",
        };
      }
    },
    viewAnalysis(id) {
      const routeData = this.$router.resolve({
        name: "groupReport",
        query: { id: id },
      });
      window.open(routeData.href, "_blank");
    },
    getSortData(id) {
      sportsEvaluationApi
        .rank({ id, trainerId: this.trainerId })
        .then((res) => {
          res = res.data.data;
          this.sortList = res.rank;
        });
    },
    initAnalysisData() {
      const param = {
        day: this.day,
        trainDetailId: this.trainDetailId,
        trainerId: this.trainerId,
      };
      AnalysisReportApi.queryTrainDetailAnalysisReport(param).then(
        (res) => {
          this.$Spin.hide();

          res = res.data.data;
          const healthData = res.healthData;
          const trainerInfo = res.trainerInfo;

          this.weight = healthData.weight ? healthData.weight : "";
          (this.height = healthData.height ? healthData.height : ""),
            (this.nickName = res.nickName);
          this.sex = trainerInfo.sex ? trainerInfo.sex : -1;
          this.avatar = trainerInfo.avatar ? trainerInfo.avatar : "";
          this.getSortData(res.trainActionId);
          this.endTrainTimeList = res.endTrainTimeList;
          this.startTrainTimeList = res.startTrainTimeList;
          if (res.weightAvgVoList.length > 0) {
            res.weightAvgVoList.map((i, index) => {
              i.seq = index + 1;
            });
          }
          this.weightAvgVoList = res.weightAvgVoList;

          this.rateWeightVoList = res.rateWeightVoList;
          //  const haveDataList = res.groupList.map(i=>{
          //    if(i.sportsRecordId!==""){
          //     return i
          //   }
          //  })
          this.canShowVideoList = res.groupList.filter((i, index) => {
            if(this.$i18n.locale === 'zh-CN'){
            if (i.sportsRecordId !== "") {
              i.videoName = res.actionName + "-第" + i.seq + "组视频";
              i.xuHao = index;
              return i;
            }
          }else{
            if (i.sportsRecordId !== "") {
              i.videoName = res.actionName + "- Group1 " + i.seq + " video";
              i.xuHao = index;
              return i;
            }
            }
          });

          this.groupList = res.groupList;
          this.nickName = res.nickName;
          this.actionName = res.actionName;
          this.planName = res.planName;
          this.courseSnapshotName = res.courseSnapshotName;

          // 设置速度
          var avgSpeedDataArr = [];
          var avgPowerDataArr = [];
          var weightArr = [];
          for (var i = 0; i < this.weightAvgVoList.length; i++) {
            var weightAvg = this.weightAvgVoList[i];
            let indexSeq = i + 1;
            weightArr.push(indexSeq + "-" + weightAvg.weight);

            avgSpeedDataArr.push({
              name: this.$t('common.avgSpeed') + "(m/s)",
              value: weightAvg.avgSpeed,
              itemStyle: { color: this.bar_color },
            });
            avgPowerDataArr.push({
              name: this.$t('common.avgPower') + "(W)",
              value: weightAvg.avgPower,
              itemStyle: { color: this.line_color },
            });
          }
          this.weightArr = weightArr;
          this.avgSpeedDataArr = avgSpeedDataArr;
          this.avgPowerDataArr = avgPowerDataArr;

          // 第二张图表
          var rateArr = [];
          var rateWeighArr = [];
          for (var i = 0; i < this.rateWeightVoList.length; i++) {
            var rateWeight = this.rateWeightVoList[i];

            rateArr.push(rateWeight.avgSpeed);
            rateWeighArr.push({
              name: this.$t('common.heft')+"(kg)",
              value: rateWeight.weight,
              itemStyle: { color: this.line_color },
            });
          }
          this.rateArr = rateArr;
          this.rateWeighArr = rateWeighArr;
          this.initPowerRateFunctionChart();
          this.initPowerRateChart();
        },
        (error) => {
          this.$Message.error(error.response.data.msg);
          this.$Spin.hide();
        }
      );
    },
    // 力量-平均速度-功率曲线
    initPowerRateFunctionChart() {
      const option = {
        tooltip: {},
        legend: {
          data: [ this.$t('common.avgSpeed'),  this.$t('common.avgPower')],
        },
        grid: {
          show: false,
        },
        xAxis: [
          {
            type: "category",
            name:  this.$t('common.powers') + "(kg)",
            nameTextStyle: {
              color: "#aaa",
            },
            axisLine: {
              lineStyle: {
                color: "#aaa",
              },
            },
            splitLine: {
              show: false, // 不显示网格线
            },
            data: this.weightArr,
          },
        ],
        yAxis: [
          {
            type: "value",
            name: this.$t('common.avgSpeed') +"(m/s)",
            splitLine: {
              show: false, // 不显示网格线
            },
            axisLine: {
              lineStyle: {
                color: "#aaa",
              },
            },
          },
          {
            type: "value",
            name:this.$t('common.avgPower') + "(W)",
            splitLine: {
              show: false, // 不显示网格线
            },
            axisLine: {
              lineStyle: {
                color: "#aaa",
              },
            },
          },
        ],
        series: [
          {
            type: "line",
            color: "#34DABA",
            name: this.$t('common.avgSpeed'),
            // barWidth: 60, // 柱图宽度
            data: this.avgSpeedDataArr,
            label: {
              show: true,
              position: "top",
            },
          },
          {
            type: "line",
            symbolSize: 10,
            color: "#0084F8",
            name: this.$t('common.avgPower'),
            data: this.avgPowerDataArr,
            yAxisIndex: 1, // 设置y轴的索引
            label: {
              show: true,
              position: "top",
            },
          },
        ],
      };

      console.log(this.avgSpeedDataArr, "888888", this.avgPowerDataArr);
      if (this.firstDom) {
        this.firstDom.dispose();
      }
      this.firstDom = echarts.init(this.$refs.power_speed_function);
      this.firstDom.setOption(option);
    },
    initPowerRateFunctionChartB() {
      const option = {
        tooltip: {},
        legend: {
          data: [ this.$t('common.avgSpeed'),  this.$t('common.avgPower')],
        },
        grid: {
          show: false,
        },
        xAxis: [
          {
            type: "category",
            name:  this.$t('common.powers') + "(kg)",
            nameTextStyle: {
              color: "#aaa",
            },
            axisLine: {
              lineStyle: {
                color: "#aaa",
              },
            },
            splitLine: {
              show: false, // 不显示网格线
            },
            data: this.weightArr,
          },
        ],
        yAxis: [
          {
            type: "value",
            name: this.$t('common.avgSpeed') +"(m/s)",
            splitLine: {
              show: false, // 不显示网格线
            },
            axisLine: {
              lineStyle: {
                color: "#aaa",
              },
            },
          },
          {
            type: "value",
            name:this.$t('common.avgPower') + "(W)",
            splitLine: {
              show: false, // 不显示网格线
            },
            axisLine: {
              lineStyle: {
                color: "#aaa",
              },
            },
          },
        ],
        series: [
          {
            type: "bar",
            color: "#34DABA",
            name:this.$t('common.avgSpeed'),
            // barWidth: 60, // 柱图宽度
            data: this.avgSpeedDataArr,
            label: {
              show: true,
              position: "top",
            },
          },
          {
            type: "bar",
            symbolSize: 10,
            color: "#0084F8",
            name:this.$t('common.avgPower'), 
            data: this.avgPowerDataArr,
            yAxisIndex: 1, // 设置y轴的索引
            label: {
              show: true,
              position: "top",
            },
          },
        ],
      };

      console.log(this.avgSpeedDataArr, "888888", this.avgPowerDataArr);
      if (this.firstDom) {
        this.firstDom.dispose();
      }
      this.firstDom = echarts.init(this.$refs.power_speed_function);
      this.firstDom.setOption(option);
    },
    // 力量-平均速度曲线
    initPowerRateChart() {
      const option = {
        tooltip: {},
        legend: {
          name: this.$t('common.heft'),
        },
        // grid: {
        //     show: false
        // },

        xAxis: {
          type: "category",
          name: this.$t('common.avgSpeed')+"(m/s)",
          nameTextStyle: {
            color: "#aaa",
          },
          axisLine: {
            lineStyle: {
              color: "#aaa",
            },
          },
          splitLine: {
            show: false, // 不显示网格线
          },
          data: this.rateArr,
        },
        yAxis: {
          type: "value",
          name: this.$t('common.heft')+"(kg)",
          splitLine: {
            show: false, // 不显示网格线
          },
          axisLine: {
            lineStyle: {
              color: "#aaa",
            },
          },
        },
        series: [
          {
            type: "line",
            barWidth: 60,
            color: "#0084F8",
            name:this.$t('common.powers'),
            data: this.rateWeighArr,
            label: {
              show: true,
              position: "top",
            },
          },
        ],
      };
 if (this.secondDom) {
        this.secondDom.dispose();
      }
      this.secondDom = echarts.init(this.$refs.power_speed);
      this.secondDom.setOption(option);
    },
      initPowerRateChartB () {
      const option = {
        tooltip: {},
        legend: {
          name: this.$t('common.heft'),
        },
        // grid: {
        //     show: false
        // },

        xAxis: {
          type: "category",
          name: this.$t('common.avgSpeed')+"(m/s)",
          nameTextStyle: {
            color: "#aaa",
          },
          axisLine: {
            lineStyle: {
              color: "#aaa",
            },
          },
          splitLine: {
            show: false, // 不显示网格线
          },
          data: this.rateArr,
        },
        yAxis: {
          type: "value",
          name: this.$t('common.heft')+"(kg)",
          splitLine: {
            show: false, // 不显示网格线
          },
          axisLine: {
            lineStyle: {
              color: "#aaa",
            },
          },
        },
        series: [
          {
            type: "bar",
            barWidth: 60,
            color: "#0084F8",
            name: this.$t('common.heft'),
            data: this.rateWeighArr,
            label: {
              show: true,
              position: "top",
            },
          },
        ],
      };
 if (this.secondDom) {
        this.secondDom.dispose();
      }
      this.secondDom = echarts.init(this.$refs.power_speed);
      this.secondDom.setOption(option);
    },
  },
};
</script>

<style>
html,
body {
  overflow: auto;
  overflow-x: hidden;
  overflow-y: auto;
}

.demo-spin-icon-load {
  animation: ani-demo-spin 1s linear infinite;
}

.avatorBox {
  background: url("../../assets/images/icon_tx_boy.png");
  background-size: contain;
  width: 20px;
  height: 20px;
  margin: 5px;
  margin-right: 0;
}

.infoBoxTop {
  display: flex;
  align-items: flex-end;
  height: 80px;
  margin-bottom: 20px;
  width: 100%;
  justify-content: space-between;
}

.studentInfo {
  width: 300px;
  display: flex;
  align-items: center;
}

.avatorBigBox {
  background: url("../../assets/images/icon_tx_boy.png");
  background-size: contain;
  width: 80px;
  height: 80px;
  margin-right: 30px;
}

.avatorIn {
  flex: 1;
  display: flex;
  flex-direction: column;
  height: 80px;
  .inhw {
    flex: 1;
  }
}

.sportRecord {
  overflow: auto;
  flex: 1;
  height: 80px;
  text-align: center;
}

.btnBox {
  width: 180px;
  display: flex;
  justify-content: end;
}

.groupRecord {
  text-align: center;
  padding: 0px 0px 10px 0px;
  color: #ff9900;
  font-size: 16px;
  line-height: 20px;
}

.color88 {
  color: #888;
}

.firstIcon {
  background: url("../../assets/images/first.png");
  background-size: contain;
  width: 20px;
  height: 28px;
  margin: 5px;
}

.secondIcon {
  background: url("../../assets/images/second.png");
  background-size: contain;
  width: 20px;
  height: 28px;
  margin: 5px;
}

.thirdIcon {
  background: url("../../assets/images/third.png");
  background-size: contain;
  width: 20px;
  height: 28px;
  margin: 5px;
}

.downBtn {
  background: url("../../assets/images/download_.png");
  background-size: contain;
  width: 22px;
  height: 26px;
  margin: 5px;
  cursor: pointer;
  display: block;
}
</style>
